<template>
  <div class="home">
    <div class="img-box"><img src="../../assets/images/bill2022/home/img1.png" alt=""></div>
    <div class="img-box1  animate__fadeInTopRight">
      <div class="airship">
        <img class="g" src="../../assets/images/bill2022/1/g.png" alt="">
        <img src="../../assets/images/bill2022/home/img2.png" alt="">
      </div>
      <!-- <img class="light" src="../../assets/images/bill2022/home/light.jpg" alt=""> -->
    </div>
    <div class="text-box">
      <div class="text-box2 bannerOne fadeInDown" ref="textBox2">
        <p style="text-align:center !important">
          欢迎与小通一起漫游数字宇宙，
        </p>
        <p style="text-align:center !important">
          航行的目的地为“智慧通用”数字空间站。
        </p>

        <p class="bold ">请各位做好准备，我们即刻出发！</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'home',
  props: {

  },
  methods: {},
}
</script>
<style lang="less" scoped>
.img-box {
  margin: 0 auto;
  width: 37.75rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  img {
    flex: 1;
  }
}

.img-box1 {
  width: 46.125rem;
  margin-top: 4rem;
  position: relative;
  .airship {
    animation: slideUp 1s ease-in-out;
    -webkit-animation: slideUp 1s ease-in-out;
    -moz-animation:slideUp 1s ease-in-out; /*gecko内核的浏览器（如 Firefox）*/
    -o-animation: slideUp 1s ease-in-out; /*Opera 浏览器*/
    -ms-animation: slideUp 1s ease-in-out; /*IE8+*/
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  @keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }

    100% {
      transform: translateY(0.4rem);
      transform: scale3d(1.2);
    }
  }
  @-webkit-keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }
    100% {
        transform: translateY(0.4rem);
      transform: scale3d(1.2);
    }
  }

  @-moz-keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }
    100% {
        transform: translateY(0.4rem);
      transform: scale3d(1.2);
    }
  }
  @-o-keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }
    100% {
        transform: translateY(0.4rem);
      transform: scale3d(1.2);
    }
  }
  @-ms-keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }
    100% {
        transform: translateY(0.4rem);
      transform: scale3d(1.2);
    }
  }
  .g {
    width: 8rem;
    height: 8rem;
    position: absolute;
    top: 2.5rem;
    left: 10.7rem;
    transform: rotate(36deg);
  }
}

.text-box {
  width: 44rem;
  height: 23.1rem;
  // margin-left: 4.75rem;
  margin: 0 auto;
  margin-top: 5.5rem;
  position: relative;
  .text-box1 {
    opacity: 0;
  }
  .text-box2 {
    p {
      text-shadow: 0.5px 0.5px 2px 0px #040f43;
      color: #fff;
      font-size: 2.1rem;
      line-height: 2;
      font-weight: bold;
      margin-bottom: 1rem;
    }

    .bold {
      line-height: 1.5;
      font-size: 2.25rem;
    }
  }
}

.swiper-slide-active .fadeInDown {
  animation: fadeInDown 1s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

@keyframes fadeInTopRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0) scale(0.4);
    transform: translate3d(100%, -100%, 0) scale(0.4);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
  }
}

.swiper-slide-active .animate__fadeInTopRight {
  animation: fadeInTopRight 2s ease-in-out;
  animation-iteration-count: 1;
}
</style>
    